<template>
  <div class="doumee-filter">
    <el-form inline label-suffix="：" @submit.native.prevent>
      <template
        v-for="(item, index) in queryFormConfig.formItems"
        v-if="item.visible !== false"
      >
        <el-form-item
          v-if="item.type === 'input' && (showZk || index < listLength)"
          :key="item.filed"
          :label="item.label"
        >
          <el-input
            v-model="searchForm[item.filed]"
            :clearable="
              item.clearable !== null &&
              item.clearable !== undefined &&
              item.clearable !== ''
                ? item.clearable
                : true
            "
            :placeholder="
              item.placeholder
                ? item.placeholder
                : $t('message.qsr') + item.label
            "
            class="w200"
            @change="changeForm(item.filed)"
            @keyup.enter.native="handlekeyup(item.keyup || false)"
          />
        </el-form-item>
        <el-form-item
          v-if="item.type === 'moneySelect' && (showZk || index < listLength)"
          :key="item.label"
          :label="item.label"
        >
          <el-input
            v-model="searchForm[item.filedStrt]"
            :clearable="
              item.clearable !== null &&
              item.clearable !== undefined &&
              item.clearable !== ''
                ? item.clearable
                : true
            "
            :placeholder="item.start"
            style="width: 150px"
          />
          <div
            class="date-division-line"
            style="margin-left: 10px; margin-bottom: 0"
          >
            ~
          </div>
          <el-input
            v-model="searchForm[item.filedEnd]"
            :clearable="
              item.clearable !== null &&
              item.clearable !== undefined &&
              item.clearable !== ''
                ? item.clearable
                : true
            "
            :placeholder="item.end"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item
          v-if="item.type === 'select' && (showZk || index < listLength)"
          :key="item.filed"
          :label="item.label"
        >
          <el-select
            v-model="searchForm[item.filed]"
            :filterable="item.filterable || true"
            :clearable="
              item.clearable !== null &&
              item.clearable !== undefined &&
              item.clearable !== ''
                ? item.clearable
                : true
            "
            :placeholder="
              item.placeholder
                ? item.placeholder
                : $t('message.qxz') + item.label
            "
            class="w200"
            @change="changeForm(item.filed)"
          >
            <el-option
              v-for="(opt, i) in item.options"
              :key="i"
              :value="item.valueCode ? opt[item.valueCode] : opt.value"
              :label="item.labelCode ? opt[item.labelCode] : opt.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="item.type === 'date' && (showZk || index < listLength)"
          :key="item.filed"
          :label="item.label || $t('message.rq')"
        >
          <el-date-picker
            v-model="searchForm[item.filed]"
            type="date"
            value-format="yyyy-MM-dd"
            class="w200"
            :clearable="
              item.clearable !== null &&
              item.clearable !== undefined &&
              item.clearable !== ''
                ? item.clearable
                : true
            "
            :placeholder="item.placeholder || $t('message.qsr')"
            :picker-options="item.pickerOptions || {}"
            @change="changeForm(item.filed)"
          />
        </el-form-item>
        <el-form-item
          v-if="item.type === 'daterange' && (showZk || index < listLength)"
          :key="item.filed"
          :label="item.label || $t('message.xzrq')"
        >
          <el-date-picker
            v-model="searchForm[item.filed]"
            value-format="yyyy-MM-dd"
            type="daterange"
            :range-separator="$t('message.zhi')"
            :clearable="
              item.clearable !== null &&
              item.clearable !== undefined &&
              item.clearable !== ''
                ? item.clearable
                : true
            "
            :start-placeholder="item.start || $t('message.ksrq')"
            :end-placeholder="item.end || $t('message.jsrq')"
            :picker-options="item.pickerOptions || {}"
            class="w400"
            @change="changeForm(item.filed)"
          />
        </el-form-item>
        <el-form-item
          v-if="item.type === 'timePicker' && (showZk || index < listLength)"
          :key="item.filed"
          :label="item.label || $t('message.xzsj')"
        >
          <el-time-picker
            v-model="searchForm[item.filed]"
            is-range
            :range-separator="$t('message.zhi')"
            format="HH:mm"
            value-format="HH:mm"
            :start-placeholder="$t('message.kssj')"
            :end-placeholder="$t('message.jssj')"
            :placeholder="$t('message.xzsjfw')"
            class="w400"
            @change="changeForm(item.filed)"
          />
        </el-form-item>
        <el-form-item
          v-if="item.type === 'datetimerange' && (showZk || index < listLength)"
          :key="item.filed"
          :label="item.label || $t('message.xzrq')"
        >
          <el-date-picker
            v-model="searchForm[item.filed]"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="item.pickerOptions || pickerOptions"
            :range-separator="$t('message.zhi')"
            :clearable="
              item.clearable !== null &&
              item.clearable !== undefined &&
              item.clearable !== ''
                ? item.clearable
                : true
            "
            :start-placeholder="item.start || $t('message.kssj')"
            :end-placeholder="item.end || $t('message.jssj')"
            class="w400"
            @change="changeForm(item.filed)"
          />
        </el-form-item>
        <el-form-item
          v-if="item.type === 'slot' && (showZk || index < listLength)"
          :key="item.filed"
          :label="item.label"
        >
          <slot :name="item.filed" />
        </el-form-item>
      </template>
      <!-- 操作 -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">{{
          $t("message.cz")
        }}</el-button>
        <el-button v-if="showQk" @click="clear">{{
          $t("message.qk")
        }}</el-button>
        <slot name="btns" />
        <template v-if="queryFormConfig.formItems.length > listLength">
          <el-button v-if="!showZk" type="text" @click="zkBtn"
            >{{ $t("message.zk") }}<i class="el-icon-caret-bottom primaryColor"
          /></el-button>
          <el-button v-if="showZk" type="text" @click="zkBtn"
            >{{ $t("message.sq") }}<i class="el-icon-caret-top primaryColor"
          /></el-button>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => {},
    },
    showQk: {
      type: Boolean,
      default: true,
    },
    listLength: {
      type: Number,
      default: 3,
    },
    queryFormConfig: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      showZk: false,
      pickerOptions: {
        shortcuts: [
          {
            text: this.$t("message.jin7"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("message.jin30"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 29);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("message.jin60"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 59);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("message.jin90"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 89);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        disabledDate(time) {
          var curDate = new Date(new Date().toLocaleDateString()).getTime();
          var preDate = new Date(curDate + 24 * 60 * 60 * 1000 - 1);
          return time.getTime() > preDate;
        },
      },
    };
  },
  emits: ["input", "handleQuery", "clear"],
  computed: {
    searchForm: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
  methods: {
    handleQuery() {
      this.$emit("handleQuery");
    },

    handlekeyup(pd) {
      if (pd) {
        this.$emit("handleQuery");
      }
      // this.$emit('handleQuery')
    },
    changeForm(filed) {
      this.$emit("changeForm", filed);
      this.$emit("handleQuery");
    },
    zkBtn() {
      this.showZk = !this.showZk;
      this.$emit("zkBtn", this.zk);
    },
    clear() {
      this.$emit("clear");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
